.box_dipaly_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.screen {
  width: 100%;
  height: 100%;
  // background: #0e4faf;
  background: url("~@/assets/screen/bg.png");
}
// .head {
//   padding: 5px 2% 0 2%;
//   color: #fff;
//   background: url("~@/assets/screen/biaoti-img.png");
// }
.el-row {
  width: 100%;
}
.head_city {
  border: 1px solid #157cb1;
  padding: 5px 10px;
  color: #4fdbfb;
  box-shadow: 0px 0px 10px #0089ff inset;
}
.head_title {
  height: 50px;
  width: 100%;
  text-align: center;
  font-size: 30px;
  letter-spacing: 1.2vh;
  background-image: -webkit-linear-gradient(bottom, #ffffff, #c0e5ff, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}
.content {
  height: calc(100% - 60px);
}
.box_row {
  height: 100%;
  .el-col {
    height: 100%;
  }
  // .el-col-12 {
  //   height: 66%;
  // }
}

.box_border {
  width: 100%;
  height: 100%;
  padding: 5px;
}
.box_top_button {
  height: 50px;
  width: 35%;
  justify-content: space-around;
  font-size: 22px;
  color: #fff;
}
.box_block {
  height: 33.3%;
  width: 100%;
  padding: 10px;

  background-image: url("~@/assets/screen/box1.png");
  background-size: 100% 100%;
}
.box_block_bottom {
  height: 33.4%;
}
.box_map {
  width: 97%;
  margin: 0 1.5%;
  height: calc(66.6% - 90px);
  border: 1px solid #24c4e0;
  box-shadow: 0 0 20px #0089ff;
}
.head_left {
  display: flex;
  padding-top: 5px;
}
.head_weather {
  display: flex;
  margin-left: 5%;
  color: #4fdbfb;
  text-align: center;
}
.head_right {
  float: right;
  display: flex;
  letter-spacing: 5px;
  width: 100%;
  justify-content: flex-end;
  padding-top: 5px;
}
.head_button {
  color: #4fdbfb;
  cursor: pointer;
  border: 1px solid #157cb1;
  padding: 8px 10px;
  box-shadow: 0px 0px 10px #0089ff inset;
}
.head_right .head_button:first-child {
  margin-right: 5%;
}
.box_center_block {
  background-image: url("~@/assets/screen/box3.png");
  background-size: 100% 100%;
}
.box_block_title {
  color: #fff;
  font-size: 18px;
  letter-spacing: 5px;
  padding: 13px 45px;
  text-shadow: 0px 0px 10px #ffffff99, 0px 0px 20px #ffffff99,
    0px 0px 30px #ffffff99, 0px 0px 40px #ffffff99;
}
.box_block_content {
  width: 100%;
  height: calc(100% - 60px);
  padding-left: 25px;
}
.device_total {
  height: 90px;
  background-image: url("~@/assets/screen/box2.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
}
.device_total_option {
  display: flex;
  align-items: center;
  color: #fff;
}
.device_total_option_content {
  border-bottom: 1px solid #81e9ff;
  height: 45px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  .device_label {
    font-family: Lcd;
    font-size: 30px;
    color: #25efbd;
    margin-left: 5px;
  }
}
.box_block_warning_list {
  padding: 13px 10px 0 45px;
}
.box_block_warning {
  box-shadow: 0px 0px 10px #0089ff inset;
  float: right;
  border: 1px solid #157cb1;
  padding: 5px;
  color: #4fdbfb;
  text-shadow: initial;
  letter-spacing: 2px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}
.big-screen-title {
  width: 100%;
  height: 60px;
  // background: #05122c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background: url("~@/assets/screen/biaoti-img.png");
  background-size: 100% 100%;
  .title-left {
    float: left;
    width: 25%;
    .hamburger-container {
      line-height: 46px;
      height: 100%;
      float: left;
      cursor: pointer;
      transition: background 0.3s;
      -webkit-tap-highlight-color: transparent;

      &:hover {
        background: rgba(0, 0, 0, 0.025);
      }
    }
  }

  .title-center {
    position: absolute;
    left: 40%;
    width: 20%;
    text-align: center;
    color: #fff;
    font-size: 34px;
    letter-spacing: 7px;
    font-weight: 900;
    text-shadow: 0px 0px 30px #ffffff99, 0px 0px 20px #ffffff99;
  }
  .title-right {
    display: flex;
    justify-content: flex-end;
    float: right;
    height: 100%;
    width: 30%;
    .right-menu {
      width: 100%;
      line-height: 50px;
      display: flex;
      justify-content: flex-end;
      .right-margin {
        margin-right: 30px;
      }
      .url-href {
        color: rgb(12, 214, 255);
        cursor: pointer;
        border: 1px solid rgb(12, 214, 255);
        padding: 5px;
        border-radius: 5px;
      }
      .url-href:hover {
        color: #0cffd2;
        border: 1px solid #0cffd2;
      }
    }
    .right-menu-item {
      color: #fff;
      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }
    .avatar-wrapper {
      display: flex;
      align-items: center;
    }
    .user-name {
      margin-left: 10px;
    }
    .user-avatar {
      cursor: pointer;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      vertical-align: text-bottom;
    }
  }
}
.night {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgb(14, 20, 105), 0 0 5px #00c3ff;
  transition: all 0.5s;
  padding: 5px;
}

.night span {
  position: absolute;
}

.night span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-image: linear-gradient(to right, transparent, #00c3ff);
  animation: move1 2s linear infinite;
  /* animation: move2 2s linear infinite; */
}

@keyframes move1 {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.night span:nth-child(2) {
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  transform: translateY(-100%);
  background-image: linear-gradient(to bottom, transparent, #00c3ff);
  animation: move2 2s linear infinite;
  animation-delay: 1s;
}

@keyframes move2 {
  100% {
    transform: translateY(100%);
  }
}

.night span:nth-child(3) {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-image: linear-gradient(to left, transparent, #00c3ff);
  animation: move3 2s linear infinite;
}

@keyframes move3 {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.night span:nth-child(4) {
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  transform: translateY(100%);
  background-image: linear-gradient(to top, transparent, #00c3ff);
  animation: move4 2s linear infinite;
  animation-delay: 1s;
}

@keyframes move4 {
  100% {
    transform: translateY(-100%);
  }
}
